/*
 * @Title: 语音播放器
 * @Created by: ycq
 */
<template>
	<view class="">
		<view class="audioPlayer">
			<view class="play" >
				<image src="/static/audioPlay.png" @click="audioPlay" v-if="!playing" mode=""></image>
				<image src="/static/audioStop.png" @click="audioPause" v-if="playing" mode=""></image>
			</view>
			<view class="player-right">
				<view class="playerSlider">
					<slider  @change="sliderChange" @changing="sliderChanging" :value="nowTime" block-size="16" activeColor="rgba(85,167,255,1.00)" backgroundColor="#FFFFFF" block-color="rgba(85,167,255,1.00)" min="0" :max="sumTime" />
					<audio  :src="src" id="myAudio" ></audio>
				</view>
				<view class='player-times'>
					<text>{{this.nowTimeM}}:{{this.nowTimeS}}/{{this.sumTimeM}}:{{this.sumTimeS}}</text>
				</view>
			</view>
			
			<image class="close" @click="close()" src="/static/close-white.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	
	export default{
		name:'audio1',
		data(){
			return{
				src:'',
				audio:null,
				playing:false,
				isChanging:false,
				nowTimeM:'00',
				sumTimeM:'00',
				nowTimeS:'00',
				sumTimeS:'00',
				nowTime:0,
				sumTime:22,
				// defaultTime:22,
			}
		},
		methods: {
			
		},
		onUnload(){
			
		},
		created(){
			this.sumTimeS = this.sumTime%60
			this.sumTimeM = parseInt(this.sumTime/60)
			if(this.sumTimeM<10){
				this.sumTimeM = '0'+this.sumTimeM
			}else{
				this.sumTimeM = parseInt(this.sumTime/60)
			}
			this.audio  = uni.createInnerAudioContext();
			this.audio.autoplay = false;
			this.audio.src = 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.mp3';
			this.audio.onPlay(() => {
				this.$store.commit('showAudioPlayerUpdate',{show:true,playing:true})
			  console.log('开始播放');
			});
			this.audio.onTimeUpdate(() => {
				this.playing = true
				this.sumTime = Math.round(this.audio.duration)/1
				this.sumTimeS = this.sumTime%60
				this.sumTimeM = parseInt(this.sumTime/60)
				
				if(this.sumTimeM<10){
					this.sumTimeM = '0'+this.sumTimeM
				}else{
					this.sumTimeM = parseInt(this.sumTime/60)
				}
				if(this.sumTimeS<10){
					this.sumTimeS = '0'+this.sumTimeS
				}else{
					this.sumTimeS = this.sumTime%60
				}
				if(!this.isChanging){
					this.nowTime = Math.round(this.audio.currentTime)/1
					this.nowTimeS = this.nowTime%60
					this.nowTimeM = parseInt(this.nowTime/60)
					if(this.nowTimeM<10){
						this.nowTimeM = '0'+this.nowTimeM
					}else{
						this.nowTimeM = parseInt(this.nowTime/60)
					}
					if(this.nowTimeS<10){
						this.nowTimeS = '0'+this.nowTimeS
					}else{
						this.nowTimeS = this.nowTime%60
					}
				}
			});
			this.audio.onPause(() => {
				this.playing = false
			});
			this.audio.onStop(() => {
				this.playing = false
			});
			this.audio.onEnded(() => {
				this.playing = false
			});
		},
		onUnload: function () {
			this.audio.destroy();
		},
		methods:{
			audioPlay: function () {
				this.audio.play()
			},
			audioPause:function(){
				this.audio.pause()
			},
			sliderChange(e) {
				this.isChanging = false
				if(this.playing){
					this.audio.seek(e.detail.value)
				}else{
					this.audio.play()
					this.audio.seek(e.detail.value)
				}
			},
			sliderChanging(e){
				this.isChanging = true
				this.nowTime = e.detail.value
				this.nowTimeS = this.nowTime%60
				this.nowTimeM = parseInt(this.nowTime/60)
				if(this.nowTimeM<10){
					this.nowTimeM = '0'+this.nowTimeM
				}else{
					this.nowTimeM = parseInt(this.nowTime/60)
				}
				if(this.nowTimeS<10){
					this.nowTimeS = '0'+this.nowTimeS
				}else{
					this.nowTimeS = this.nowTime%60
				}
			},
			close(){
				console.log(111)
				this.audio.destroy()
				//#ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.closeAudio();
				//#endif
				//#ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.closeAudio();
				//#endif
				// this.$store.commit('showAudioPlayerUpdate',{show:false})
			}
		}
		
	}
</script>

<style scoped>
	.audioPlayer{
		width: 700upx;
		left: 25upx;
		right: 25upx;
		height: 120upx;
		background: rgba(0,0,0,0.6);
		border-radius: 20upx;
		position: fixed;
		bottom: 150upx;
	}
	.play{
		width:80upx;
		height: 80upx;
		margin-top: 22upx;
		float: left;
		margin-left: 34upx;
	}
	.play image{
		width: 80upx;
		height: 80upx;
	}
	.player-right{
		width: 500upx;
		height: 120upx;
		float: left;
		margin-left: 35upx;
		
	}
	.playerSlider{
		width: 500upx;
		height: 6upx;
		margin-top: 36upx;
		/* background: #FFFFFF; */
	}
	.playerSlider slider{
		width: 500upx;
		margin-left: 0;
	}
	.player-times{
		width: 500upx;
		margin-top: 20upx;
		height: 50upx;
	}
	.player-times text{
		font-size: 26upx;
		color: #FFFFFF;
	}
	.uni-slider-tap-area{
		border: #FFFFFF solid 1upx;
	}
	.close{
		width: 23upx;
		height: 23upx;
		padding: 10upx;
		position: absolute;
		right: 0upx;
		top: 0upx;
	}
</style>
